<script setup lang="ts">
defineOptions({
  name: "Courseconfig",
  inheritAttrs: false,
});

import courseimg from "./courseimg.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import router from "@/router";
import { Courseinfo, EditCourseForm } from "@/api/course/types";
import { deleteCourse, editCourse, getCourseInfo } from "@/api/course";
import { useAppStore } from "@/store/modules/app";
import { useCourseStore } from "@/store/modules/course";
import { translateTagDictI18n } from "@/utils/i18n";

const courseStore = useCourseStore();
const courseId = ref();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { semesters } = proxy?.useDict("semesters"); // 学期
const appStore = useAppStore();
const formRef = ref(ElForm);
const loading = ref(false);
const courseInfoLoading = ref(false);
const deleteloding = ref(false);
const formData = reactive<EditCourseForm>({
  name: "",
  // endTime: "",
  semester: "",
  // status: 0,
}); // 传数据
const courseinfo = ref<Courseinfo>({
  name: "",
  endTime: "",
  semester: "",
  wallpaperUrl: "",
  status: 0,
  statusLabel: "",
  roles: [],
});
const wallpaperUrl = ref<string>("");
const rules = reactive({
  name: [{ required: true, message: "课程名不能为空", trigger: "blur" }],
  semester: [{ required: true, message: "学期不能为空", trigger: "blur" }],
  // status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
  // endTime: [{ required: true, message: "截止时间不能为空", trigger: "blur" }],
});

// 提交函数
function resetCourse() {
  formData.name = courseinfo.value.name!;
  formData.semester = courseinfo.value.semester!;
  // formData.status = courseinfo.value.status!;
  // formData.endTime = courseinfo.value.endTime!;
}
// 提交函数
function submit() {
  formRef.value.validate((valid: boolean) => {
    // 直接调用 并传递参数
    if (valid) {
      ElMessageBox.confirm("确认更改课程信息?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        loading.value = true;
        // formData.endTime = formatDate(new Date(formData.endTime));
        editCourse(formData, courseId.value)
          .then(() => {
            handleQuery();
            loading.value = false;
          })
          .finally(() => {});
      });
    }
  });
}
// 搜索函数
function handleQuery() {
  courseInfoLoading.value = true;
  getCourseInfo(courseId.value)
    .then(({ data }) => {
      courseinfo.value = { ...data };

      formData.name = data.name!;
      formData.semester = data.semester!;
      // formData.status = data.status!;
      // formData.endTime = data.endTime!;

      wallpaperUrl.value = data.wallpaperUrl!;
      courseInfoLoading.value = false;
    })
    .finally(() => {});
}
function removecourse() {
  deleteloding.value = true;
  ElMessageBox.confirm("确认删除课程?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    deleteCourse(courseId.value)
      .then(() => {
        ElMessage.success("成功删除课程");
        router.push("/course/teach");
      })
      .finally(() => {
        deleteloding.value = false;
      });
  });
}

onMounted(() => {
  courseId.value = courseStore.courseId;
  handleQuery(); //首先查询
  // 隐藏展板
  appStore.sidebar.opened = false;
});
</script>
<template>
  <div class="flex">
    <el-skeleton :loading="courseInfoLoading" animated>
      <template #template>
        <div style="display: flex; width: 100%">
          <el-card class="w-3/11 user" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>
                  <el-skeleton-item style="width: 100%; height: 2rem" />
                </span>
              </div>
            </template>
            <div>
              <div
                style="
                  margin-bottom: 2rem;
                  display: flex;
                  justify-content: center;
                "
              >
                <el-skeleton-item
                  variant="image"
                  style="width: 10rem; height: 10rem"
                />
              </div>
              <ul class="list-group list-group-striped">
                <li v-for="i in 4" :key="i" class="list-group-item">
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      height: 16px;
                    "
                  >
                    <el-skeleton-item
                      variant="text"
                      style="margin-right: 16px; width: 30%"
                    />
                    <el-skeleton-item variant="text" style="width: 40%" />
                  </div>
                </li>
              </ul>
            </div>
          </el-card>
          <el-card class="w-8/11 user ml-3" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>
                  <el-skeleton-item style="width: 100%; height: 2rem" />
                </span>
              </div>
            </template>
            <div>
              <div style="height: 100%">
                <ul class="list-group list-group-striped">
                  <li v-for="i in 4" :key="i" class="list-group-item">
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 16px;
                      "
                    >
                      <el-skeleton-item
                        variant="text"
                        style="margin-right: 16px; width: 20%"
                      />
                      <el-skeleton-item variant="text" style="width: 70%" />
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </el-card>
        </div>
      </template>
      <template #default>
        <el-card class="w-3/11 user" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>{{ courseinfo.name }}</span>
            </div>
          </template>
          <div>
            <div class="text-center">
              <courseimg />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <el-icon> </el-icon>
                {{ $t("courseconfig.Kursname") }}
                <div class="pull-right">{{ courseinfo.name }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="coursename" />
                {{ $t("courseconfig.Semester") }}
                <div class="pull-right">{{ courseinfo.semester }}</div>
              </li>
              <!-- <li class="list-group-item">
                <svg-icon icon-class="termid" />
                状态
                <div class="pull-right">{{ courseinfo.statusLabel }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="situation" />
                截止日期
                <div class="pull-right">
                  {{ courseinfo.endTime }}
                </div>
              </li> -->
            </ul>
          </div>
          <div>
            <el-button
              v-throttle="removecourse"
              v-hasPerm="['courseinfo:courseconfig:delete']"
              type="danger"
              deleteloding
              plain
              style="float: left; position: relative; left: 35%"
            >
              {{ $t("courseconfig.Kurslöschen") }}
            </el-button>
          </div>
        </el-card>
        <el-card class="w-8/11 user ml-3" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>{{ $t("courseconfig.GrundlegendeInformationen") }} </span>
            </div>
          </template>
          <div>
            <div style="height: 100%">
              <el-form
                ref="formRef"
                :model="formData"
                :label-width="80"
                :rules="rules"
                label-position="left"
              >
                <el-form-item :label="$t('courseconfig.Kursname')" prop="name">
                  <el-input
                    v-model="formData.name"
                    :placeholder="$t('courseconfig.BitteKursnamen')"
                    clearable
                    style="width: 100%"
                  />
                </el-form-item>
                <el-form-item
                  :label="$t('courseconfig.Semester')"
                  prop="semester"
                >
                  <el-select v-model="formData.semester" style="width: 100%">
                    <el-option
                      v-for="dict in semesters"
                      :key="dict.value"
                      :label="translateTagDictI18n('semesters', dict.label)"
                      :value="dict.label"
                    />
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="状态" prop="status">
                  <el-radio-group v-model="formData.status">
                    <el-radio :label="0">进行中</el-radio>
                    <el-radio :label="1">已结束</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="截止日期" prop="endTime">
                  <el-col :span="10" class="text-center">
                    <el-date-picker
                      v-model="formData.endTime"
                      class="choose-date"
                      type="datetime"
                      placeholder="选择日期"
                      clearable
                      style="width: 100%"
                    />
                  </el-col>
                </el-form-item> -->
              </el-form>
            </div>
          </div>
          <div class="btn">
            <el-button
              v-throttle="submit"
              v-hasPerm="['courseinfo:courseconfig:save']"
              type="success"
              plain
              >{{ $t("courseconfig.konservieren") }}</el-button
            >
            <el-button
              v-throttle="resetCourse"
              v-hasPerm="['courseinfo:courseconfig:save']"
              type="danger"
              plain
              >{{ $t("courseconfig.Abbrechen") }}</el-button
            >
          </div>
        </el-card>
      </template>
    </el-skeleton>
  </div>
</template>
<style scoped>
.user {
  max-height: 960px;
  padding: 15px 20px 20px;
}

.flex {
  font-size: large;
  font-weight: bolder;
  align-items: left;
  margin: 20px;
}

.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-card .el-card__header, .el-card .el-card__body) {
  padding: 15px !important;
  background-color: var(--el-bg-color-page);
}

.profile-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-weight: 600;
}

.el-tabs--left .el-tabs__content {
  height: 100%;
}

.btn {
  margin-bottom: 50px;
}

.el-input {
  width: 50%;
}

.el-input {
  width: 50%;
}

.text-center {
  text-align: center;
  position: relative;
  /* height: 160px; */
}

.list-group-striped > .list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.list-group {
  padding-left: 0;
  list-style: none;
  margin-bottom: 40px;
}

.list-group-item {
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0;
  font-size: 13px;
}

.pull-right {
  float: right !important;
}

::deep .choose-date .el-input__wrapper {
  transform: translateY(10em);
}

::deep .choose-date .el-input__wrapper::before {
  content: "选择日期";
  color: #666;
}

::deep .choose-time .el-input__wrapper {
  transform: translateY(10em);
}

::deep .choose-time .el-input__wrapper::before {
  content: "选择时间";
  color: #666;
}
</style>
